<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>简单的秒表</title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="app">
        <input type="button" name="" id="" value="开始计时" @click="timer" /></br>
        {{num}}</br>
        <input type="button" name="" id="" value="暂停计时" @click="stop" />
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app", // 绑定 Vue 实例到 id 为 "app" 的元素
            data: {
                num: 0  // 初始化数据，num 用于记录秒表的计数值
            },
            methods: {
                timer: function() { 
                    // 定义开始计时的方法
                    time = setInterval(function() { 
                        // 创建一个每秒执行一次的定时器，使 num 值自增
                        vm.num++
                    }, 1000)
                },
                stop: function() { 
                    // 定义暂停计时的方法
                    clearInterval(time); 
                    // 清除之前创建的定时器
                }
            }
        });
    </script>
</body>
</html>